<template>
  <div class="voice-feedback">
    <div class="vioce-group voice-volume">
      <div class="group-title">
        <p class="title-text">{{ $t('cmlpanel.volumeAdjust') }}</p>
        <button
          class="cml-base-button title-default"
          @click.stop="defaultVolume"
        >
          {{ $t('cmlpanel.default') + $t('cmlpanel.volume') }}
        </button>
        <button class="cml-base-button title-try" @click.stop="testSynthesis">
          {{ $t('cmlpanel.audition') }}
        </button>
      </div>
      <div class="group-ctrl">
        <div class="slider-box">
          <a-slider
            :min="0"
            :max="100"
            @afterChange="change"
            v-model="synthesisParams.volume"
          ></a-slider>
        </div>
        <div class="slider-mark">
          <span>0</span>
          <span>20</span>
          <span>40</span>
          <span>60</span>
          <span>80</span>
          <span>100</span>
        </div>
      </div>
    </div>
    <div class="vioce-group voice-rate">
      <div class="group-title">
        <p class="title-text">{{ $t('cmlpanel.rateAdjust') }}</p>
        <button class="cml-base-button title-default" @click.stop="defaultRate">
          {{ $t('cmlpanel.default') + $t('cmlpanel.rate') }}
        </button>
        <button class="cml-base-button title-try" @click.stop="testSynthesis">
          {{ $t('cmlpanel.audition') }}
        </button>
      </div>
      <div class="group-ctrl">
        <div class="slider-box-rate">
          <a-slider
            :min="0"
            :max="200"
            :step="10"
            :tipFormatter="tipFormatter"
            @afterChange="change"
            v-model="synthesisParams.rate"
          ></a-slider>
        </div>
        <div class="slider-mark slider-mark-rate">
          <span>{{ $t('cmlpanel.slow') }}</span>
          <span>{{ $t('cmlpanel.normal') }}</span>
          <span>{{ $t('cmlpanel.fast') }}</span>
        </div>
      </div>
    </div>
    <div class="vioce-group voice-serviceselect">
      <div class="group-select-title">
        <p class="title-text">{{ $t('cmlpanel.currentVoiceProvide') }}</p>
      </div>
      <div class="group-select-ctrl">
        <a-select
          size="small"
          :value="synthesisType"
          :options="voiceServiceArr"
          style="width: 120px"
          @change="handleChangeVoiceService"
        >
        </a-select>
      </div>
    </div>
    <div
      class="vioce-group voice-serviceselect"
      v-show="synthesisType == 'xf' ? true : false"
    >
      <div class="group-select-title">
        <p class="title-text">{{ $t('cmlpanel.voiceName') }}</p>
      </div>
      <div class="group-select-ctrl">
        <a-select
          size="small"
          :value="voiceNameCurrent"
          :options="voiceNameOption"
          style="width: 120px"
          @change="voiceNameChange"
        >
        </a-select>
      </div>
    </div>
  </div>
</template>
<script>
// import { mapGetters, mapMutations, mapState } from 'vuex'
import { Slider, Select, Radio } from 'ant-design-vue'
import Bus from '../../../util/bus.js'
import { voiceFeedbackServer as vfs } from 'anov-core'
export default {
  name: 'VoiceFeedbackMore',
  components: {
    ASlider: Slider,
    ASelect: Select,
    ARadioGroup: Radio.Group,
    ARadio: Radio
  },
  model: {},
  props: ['voiceNameOption', 'voiceNameDefault'],
  data() {
    return {
      synthesisParams: {
        volume: 100,
        rate: 100,
        lang: 'zh-CN'
      },
      status: '',
      voiceServiceArr: [
        {
          label: '默认',
          value: 'default'
        },
        {
          label: '智灵',
          value: 'xf'
        }
      ],
      voiceNameCurrent: '',
      isInit: true
    }
  },
  computed: {
    ...vfs.mapGetters(['synthesisType', 'thirdConfig'])
  },
  watch: {},
  created() {
    // 监听事件，以便于其它的处理
    vfs.addEventListener('ready', (ev) => {
      // todo
      // console.log(ev)
    })
    vfs.addEventListener('start', (ev) => {
      // todo
      // console.log(ev)
    })
    vfs.addEventListener('end', (ev) => {
      // todo
      // console.log(ev)
    })
  },
  mounted() {
    this.initOption()
    let _this = this
    // vfs.addEventListener('testStart', _this.voiceSuccessHandle)
    // vfs.addEventListener('testError', _this.voiceErrorHandle)
  },
  beforeDestroy() {
    let _this = this
    vfs.removeEventListener('testStart', _this.voiceSuccessHandle)
    vfs.removeEventListener('testError', _this.voiceErrorHandle)
    // todo removeEventListener
  },
  methods: {
    // 初始化配置
    initOption() {
      let currentOpt = vfs.getOption()
      this.synthesisParams.volume = Math.round(currentOpt.volume * 100)
      this.synthesisParams.rate = Math.round(currentOpt.rate * 100)
      this.synthesisParams.lang = currentOpt.lang
      // this.voiceNameCurrent = this.voiceNameDefault
      this.voiceNameCurrent = currentOpt.voiceName || this.voiceNameDefault
    },
    // 默认音量
    defaultVolume() {
      this.synthesisParams.volume = 100
      this.change()
    },
    // 默认语速
    defaultRate() {
      this.synthesisParams.rate = 100
      this.change()
    },
    // 修改语言
    changeLang(lang) {
      this.synthesisParams.lang = lang
      this.change()
    },
    // 修改参数值
    change() {
      vfs.setOption({
        volume: this.synthesisParams.volume / 100,
        rate: this.synthesisParams.rate / 100,
        lang: this.synthesisParams.lang
      })
    },
    // 试听
    testSynthesis() {
      vfs.speak('这是一段测试文字')
    },
    // 格式化tooltip
    tipFormatter(val) {
      return val / 100 + 'x'
    },
    // 语音服务提供选项修改
    handleChangeVoiceService(val) {
      this.isInit = false
      vfs.changeSynthesisType(val)
      if (val == this.voiceServiceArr[1].value) {
        this.testSecondVoiceInterface()
      } else {
        let msg = `语音提示接口切换为${this.voiceServiceArr[0].label}`
        app.msg({ type: 'success', content: msg })
        vfs.speak(msg)
      }
    },
    //测试第二种语音提示接口
    testSecondVoiceInterface() {
      let _this = this
      if (!app.envServer.localNetwork.connected) {
        setTimeout(() => {
          let msg = '网络连接断开，语音提示接口已切换到默认'
          app.msg({ type: 'error', content: msg })
          vfs.changeSynthesisType('default')
          vfs.speak(msg)
        }, 100)
      } else {
        vfs.test('测试', { volume: 0 })
      }
    },
    voiceSuccessHandle() {
      if(this.synthesisType == 'xf'){vfs.setThirdConfig({ voiceName: this.voiceNameCurrent })}
      let msg = `语音提示接口切换为${this.voiceServiceArr[1].label}`
      app.msg({ type: 'success', content: msg })
      vfs.speak(msg, { volume: this.synthesisParams.volume / 100 })
    },
    voiceErrorHandle() {
      let msg = `语音提示接口切换为${
        this.voiceServiceArr[1].label
      }失败,已为您切换为默认`
      app.msg({ type: 'error', content: msg })
      vfs.changeSynthesisType('default')
      vfs.speak(msg)
    },
    // 语音提示发音人change
    voiceNameChange(e) {
      let value = e,
        label = ''
      let arr = [...this.voiceNameOption]
      arr.forEach((v, i) => {
        if (v.value == value) label = v.label
      })
      this.voiceNameCurrent = e
      vfs.setThirdConfig({ voiceName: e })
      let msg = `发音人切换为${label}`
      app.msg({ type: 'success', content: msg })
      vfs.speak(msg)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../style/panel-var.scss';
@import '../../../style/panel-mixin.scss';

.voice-feedback {
  padding: 20px;
  box-sizing: border-box;

  font-size: $fz-ssm;
  button {
    font-size: $fz-ssm;
  }
  .vioce-group {
    margin-bottom: 10px;
    .group-title {
      margin-bottom: 10px;

      @include flex(row, space-between);

      .title-text {
        margin-right: auto;
      }
      .title-default {
        margin-right: 10px;
      }
    }
    .group-ctrl {
      height: 70px;
      .slider-box {
        height: 42px;
        padding-top: 6px;

        background-image: linear-gradient(90deg, #cafff733 1px, transparent 0),
          linear-gradient(90deg, #cafff733 1px, transparent 0);
        background-repeat: repeat-x;
        background-position-x: 6px;
        background-position-y: 0, 12px;
        background-size: 19% 42px, 3.8% 10px;
      }
      .slider-mark {
        @include flex(row, space-between);
        color: #cafff733;
        span {
          display: inline-block;

          width: 16px;

          text-align: center;
        }
      }
      .slider-box-rate {
        height: 42px;
        padding-top: 6px;

        background-image: linear-gradient(90deg, #cafff733 1px, transparent 0),
          linear-gradient(90deg, #cafff733 1px, transparent 0);
        background-repeat: repeat-x;
        background-position-x: 6px;
        background-position-y: 22px, 22px;
        background-size: 19% 16px, 3.8% 8px;
      }
      .slider-mark-rate {
        span {
          width: auto;
        }
      }
    }
  }
}
.voice-feedback .voice-serviceselect {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
